import React, { useState, useEffect } from 'react';
import { Title } from 'base/ctl/title';
import { useStep } from 'use/step';
import { get_path, } from 'base/ctl/base';
import { DlgLog } from 'base/ctl/log';
import { Time } from 'base/ctl/base';
import { no_del, uDb, MaTable, Wait, NuiBt, is_empty } from 'sui';
import { g_db, g_wsn, g_line } from 'db/state';
import { loc } from 'local';
import { load_task } from './cmd';
import { PairView } from './pair';

const ClientView = ({ umd, wsn }) => {
    const [task, setTask] = useState();
    const [wait, setWait] = useState(false);
    const [open_log, openLog] = useState(false);
    const [fin, setFin] = useState("start");
    const [cur, setCur] = useState();

    useEffect(() => {
        load_task(null, setTask);
    }, []);

    if (fin === "pair") {
        return <PairView hreturn={() => setFin("start")} cur={cur}/>;
    }

    const hAction = (d, tp) => {
        setCur(d);
        setFin(tp);
    };

    const hUpdate = () => {
        setWait(true);
        load_task(() => setWait(false), setTask);
    };

    const hDone = (sn) => {
        if (no_del("确认配圈完成")) {
            return;
        }

        setWait(true);

        uDb(null, "task/md",
            {
                line: g_line(),
                k: sn,
                v: {
                    pairst: "close",
                }
            },
            r => load_task(() => setWait(false), setTask), e => setWait(false));
    };

    const taskRow = () => {
        if (is_empty(task)) {
            return null;
        }

        return task;
    };

    const stInfo = (v) => {
        if (v === "open") {
            return loc("base_129");
        }
        else if (v === "pause") {
            return loc("base_74");
        }

        return "";
    };

    const col = [
        {title: loc("client_60"), field: 'sn', width: 200},
        {title: loc("base_23"), field: 'tech', width: 120},
        {title: "成套数量", field: 'dnum', width: 120},
        {title: loc("start_40"), field: 'state', width: 120, render: d => stInfo(d.state)},
        {title: loc("client_23"), field: 'e_opt', width: 240, render: d => {
            return (
                <div className="inline-flex items-center">
                    <NuiBt className="ml-4 h-16" hcmd={() => hAction(d, "pair")}>挑选内外圈</NuiBt>
                    <NuiBt className="ml-8 h-16" color="indigo" hcmd={() => hDone(d.sn)}>配圈完成</NuiBt>
                </div>
            );
        }}
    ];

    return (
        <div className="flex flex-col ml-2 mr-2">
            <div className="inline-flex items-center justify-between mt-2 mb-2">
                <Title label={loc("base_43")} value={g_wsn()} width="w-56"/>
                <Time/>
                <div className="inline-flex">
                    <NuiBt name="update" className="h-16 ml-4 mr-6"  color="indigo" hcmd={hUpdate}>同步工单</NuiBt>
                    <NuiBt name="log" className="h-16 mr-2" hcmd={() => openLog(true)}>{loc("base_157")}</NuiBt>
                </div>
            </div>
            <MaTable col={col} row={taskRow()} title={loc("start_38")} page={8} paging={true}
                     opt={{
                        minBodyHeight: 730,
                        maxBodyHeight: 730,
                    }}/>
            <Wait wait={wait}/>
            <DlgLog open={open_log} setOpen={openLog}/>
        </div>
    );
};

const PickClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep(line, wsn);

    g_db.stop_scan();

    return <ClientView umd={umd} wsn={wsn}/>;
};

export {PickClient};
